<!DOCTYPE html >
<html>
<head>
    <meta name="Generator" content=""/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>微米荟 </title>
    <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon"/>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

    <link rel="stylesheet" type="text/css" href="/template/default/css/public.css"/>
    <link rel="stylesheet" href="/template/default/css/flow.css">
    <link rel="stylesheet" type="text/css" href="/template/default/css/goods.css"/>
    <link rel="stylesheet" type="text/css" href="/template/default/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="https://static.9hive.cn/global/vendor/layui/css/layui.mobile.css"/>
    <link rel="stylesheet" type="text/css" href="/template/default/css/category_list.css"/>
    <script type="text/javascript" src="/template/default/js/TouchSlide.1.1.js"></script>
    <!--<script type="text/javascript" src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>-->
    <script src="https://static.9hive.cn/global/vendor/jquery/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/template/default/js/jquery.json.js"></script>
    <script type="text/javascript" src="/template/default/js/transport.js"></script>
    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/touch/touchslider.dev.js"></script>
    <script type="text/javascript" src="/template/default/js/jquery.more.js"></script>
    <script type="text/javascript" src="/template/default/js/common.js"></script>
    <script src="https://static.9hive.cn/global/vendor/layui/layui.all.js"></script>

    <script type="text/javascript" src="https://static.9hive.cn/global/vendor/layer/layer.js"></script>

    <!--添加商品至购物车-->
    <script type="text/javascript" src="/template/default/js/product.js"></script>
    <script type="text/javascript" src="/res/js/jquery.metadata.js"></script>


    <style>
        .scrollimg {
            position: relative;
            overflow: hidden;
            margin: 0px auto; /* 设置焦点图最大宽度 */
        }

        .scrollimg .hd {
            position: absolute;
            bottom: 0px;
            text-align: center;
            width: 100%;
        }

        .scrollimg .hd li {
            display: inline-block;
            width: .4em;
            height: .4em;
            margin: 0 .4em;
            -webkit-border-radius: .8em;
            -moz-border-radius: .8em;
            -ms-border-radius: .8em;
            -o-border-radius: .8em;
            border-radius: .8em;
            background: #FFF;
            filter: alpha(Opacity=60);
            opacity: .6;
            box-shadow: 0 0 1px #ccc;
            text-indent: -100px;
            overflow: hidden;
        }

        .scrollimg .hd li.on {
            filter: alpha(Opacity=90);
            opacity: .9;
            background: #f8f8f8;
            box-shadow: 0 0 2px #ccc;
        }

        .scrollimg .bd {
            position: relative;
            z-index: 0;
        }

        .scrollimg .bd li {
            position: relative;
            text-align: center;
        }

        .scrollimg .bd li img {
            background: center center no-repeat;
            vertical-align: top;
            width: 100%; /* 图片宽度100%，达到自适应效果 */
        }

        .scrollimg .bd li a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        /* 去掉链接触摸高亮 */
        .scrollimg .bd li .tit {
            display: block;
            width: 100%;
            position: absolute;
            bottom: 0;
            text-indent: 10px;
            height: 28px;
            line-height: 28px;
            background: url('') repeat-x;
            color: #fff;
            text-align: left;
        }
    </style>
    <style>
        .touchweb-com_searchListBox.openList .item {
            border-right: 2.5px solid #f8f8f8;
            border-top: 5px solid #f8f8f8;
            height: 100%;
        }

        .touchweb-com_searchListBox .item {
            border-bottom: 0;
            background: #fff;
        }

        .touchweb-com_searchListBox.openList .item .pic_box {
            margin-bottom: 0;
        }

        .lists {
            padding: 0 10px;
        }

        .touchweb-com_searchListBox.openList .item .pic_box:after {
            content: '';
            padding-top: 86%;
        }

        .touchweb-com_searchListBox .item .title_box {
            height: 36px;
        }

        .touchweb-com_searchListBox.openList .item .title_box {
            margin: 5px 0;
            font-family: STHeitiSC-Light;
            font-size: 16px;
            color: #666;
            letter-spacing: 0;
            line-height: 16px;
            display: -webkit-box;
            overflow: hidden;
            height: auto!important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .touchweb-com_searchListBox .bug_car i {
            background-size: 22px 22px;
        }

        .dropload-down {
            display: none;
        }

        .touchweb-com_searchListBox.openList li:nth-child(even) .item {
            border-right: 0;
            border-left: 2.5px solid #f8f8f8;
        }

        .touchweb-com_searchListBox.openList .bug_car {
            bottom: 15px;
        }

        .touchweb-com_searchListBox .item:active {
            background-color: #ffffff;
        }

        .WX_search_btn_blue {
            border: none;
            height: 29px;
            line-height: 29px;
            position: relative;
            top: -3px;
        }

        .WX_me {
            right: 10px;
        }

        .WX_search_txt {
            width: 81%;
        }

        .h-left {
            width: 7%;
        }

        .h-left a {
            background-position: 15px 15px;
        }

        .touchweb-com_searchListBox li {
            margin-bottom: 5px;
        }

        .touchweb-com_searchListBox .item .price_box {
            position: absolute;
            bottom: 10px;
            left: 111px;
        }

        .openList li {
            margin-bottom: 0;
            height: 250px;
          background-color: white}

        .openList .item .price_box {
            position: static;
            margin-top: 10px;
        }

        img {
            max-width: 100%;
        } .discount {
              color: #ff3c3c;
              font-size: 16px;
          }

        .color-red {
            color: #ff3c3c;
        }
    </style>
    <style>
        .product_sku:after {
            border: none;
        }
    </style>
</head>
<body>
<div id="page" class="">
    <div>
        <div id="scrollimg" class="scrollimg">
            <div class="bd">
                <ul>
                    <%for(list in admanagesDiscount!){%>
                    <li>
                        <a href="#"><img lay-src="${list.image}"></a>
                    </li>
                    <%}%>
                </ul>
            </div>
            <div class="hd">
                <ul></ul>
            </div>
        </div>
        <script type="text/javascript">
            TouchSlide({
                slideCell: "#scrollimg",
                titCell: ".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
                mainCell: ".bd ul",
                effect: "leftLoop",
                autoPage: true,//自动分页
                autoPlay: true //自动播放
            });
        </script>

        <div class="black"></div>
        <div class="touchweb-com_searchListBox openList">
            <div class="content">
                <ul class="">
                    <%for(product in cheapProductList!){%>
                    <li >
                        <a href="/b/product/detailWap?id=${product.id}&shopId=${shopId!}" class="item">
                            <div class="pic_box">
                                <img lay-src="${product.productImageList[0].smallProductImagePath!}">
                            </div>
                            <div class="title_box">${product.name!}</div>
                            <div class="price_box">
                                <span class="new_price"><i>￥${product.price}</i></span>

                            </div>
                            <div> <%if(product.productRebatePercentMoney!='' &&
                                product.productRebatePercentMoney!=0.00 &&
                                isNotEmpty(product.productRebatePercentMoney)){%>
                                <span class="color-red">返现￥<span
                                        class="discount">${product.productRebatePercentMoney}</span></span>
                                <%}%>
                            </div>
                        </a>
                        <span class="bug_car product_sku {id: '${product.id}',shopId:'${shopId!}',specificationids:'${product.specificationids}',specificationvalues:'${product.specificationvalues}',sourceProductImagePath:'${product.productImageList[0].sourceProductImagePath!}',price:'${product.price!'0.00'}',store:'${product.store!product.freezeStore!0}',specificationtype:'${product.specificationtype!}'}">
                                <i class="icon-shop_cart"></i>
                            </span>
                    </li>
                    <%}%>
                </ul>
            </div>
        </div>

        <!--sku-->
        <div class="flick-menu-mask"></div>
        <div class="spec-menu">
            <div class="spec-menu-content spec-menu-show" style="display: block;">
                <div class="spec-menu-top bdr-b">
                    <div class="spec-first-pic">
                        <img id="spec-img" title="" src="">
                        <!--list.sourceProductImagePath-->
                    </div>
                    <a class="rt-close-btn-wrap spec-menu-close">
                        <p class="flick-menu-close tclck"></p>
                    </a>
                    <div class="spec-price" id="specJdPri" style="display: block">
                        <span class="yang-pic">￥</span>
                        <span id="spec_price"> </span>
                    </div>
                    <div class="spec-sku">
                        <span>库存:</span>
                        <span></span>件
                    </div>
                    <input type="hidden" class="spec-specificationtype" value="">

                </div>
                <div class="spec-menu-middle">
                    <div class="prod-spec" id="prodSpecArea">
                        <!-- 已选 -->
                        <div class="spec-desc"><span class="part-note-msg">已选</span>
                            <div id="specDetailInfo_spec" class="base-txt">

                            </div>
                        </div>
                        <ul class="lists">
                            <!--规格-->
                        </ul>
                        <div id="addCartNum" class="pro-count"><span class="part-note-msg" style="margin-right: 10px;">数量</span>
                            <div class="num">
                                <p class="jian"></p>
                                <input id="quantity" class="inputBorder" value="1"
                                       onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"
                                       onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" type="text"
                                       maxlength="5">
                                <p class="jia"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flick-menu-btn spec-menu-btn">
                    <a class="yellow-color add_cart addCartItem " id="add_cart_spec"
                       style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">加入购物车</a>
                    <a class="red-color directorder" id="directorder_spec"
                       style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">立即购买</a>
                </div>
            </div>
        </div>
        <!--sku-->


        <script type="text/javascript" src="/template/default/js/scroll.more.js"></script>
        <%include("footer_sys.html"){}%>
        <a href="javascript:goTop();" class="gotop"><img lay-src="/template/default/images/topup.png"></a>
    </div>
</div>

<script>
    (function () {
        layui.use('flow', function(){
            var flow = layui.flow;
            //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
            flow.lazyimg();
        });
    })()
</script>
<script type="text/javascript">
    var button_compare = "";
    var exist = "您已经选择了%s";
    var count_limit = "最多只能选择4个商品进行对比";
    var goods_type_different = "\"%s\"和已选择商品类型不同无法进行对比";
    var compare_no_goods = "您没有选定任何需要比较的商品或者比较的商品数少于 2 个。";
    var btn_buy = "购买";
    var is_cancel = "取消";
    var select_spe = "请选择商品属性";
</script>
<script>
    function goTop() {
        $('html,body').animate({'scrollTop': 0}, 600);
    }

    $(function () {
        //sku
        $(".product_sku").click(function () {
            var $this = $(this);
            var specificationids = $this.metadata().specificationids;//规格值
            var skuValues = $this.metadata().specificationvalues;//规格值id
            var sourceProductImagePath = $this.metadata().sourceProductImagePath;//图片
            var price = $this.metadata().price;//价格
            var store = $this.metadata().store;//库存
            var specificationtype = $this.metadata().specificationtype;//specificationtype
            var shopId = $this.metadata().shopId;//店铺id
            var id = $this.metadata().id;//商品id

            $("#spec-img").attr("src", sourceProductImagePath);
            $("#spec_price").html(price);
            $(".spec-sku").find("span").eq(1).text(store);
            $(".spec-specificationtype").val(specificationtype);

            $(".add_cart").attr("class", "yellow-color add_cart addCartItem {shopId:'" + shopId + "',id:'" + id + "'}");
            $(".directorder").attr("class", "red-color directorder {shopId:'" + shopId + "',id:'" + id + "'}");//立即购买

            $(".flick-menu-mask").show();
            $(".spec-menu").addClass("modal-active");
            $("body").addClass("hidden");
            var result = '';
            /*if($(".lists").children().length>0){
                return false;
            }*/
            $.ajax({
                url: "/b/specification/getSku",
                type: 'GET',
                data: {
                    "specificationids": specificationids
                },
                success: function (r) {
                    if (r.state == 'ok') {//回调成功
                        //layer.msg("回调成功!");
                        //alert(r.info.length);
                        $(".lists").empty();
                        $("#specDetailInfo_spec").empty();
                        if (r.info.length > 0) {
                            $('.lists').empty();
                            //result+='';
                            $.each(r.info, function (k, v) {
                                $("#specDetailInfo_spec").append("<div class=\"base-sku\"></div>&nbsp;")
                                var specificationId = v.specificationId;
                                var specificationName = v.specificationName;
                                result += '<div class="nature-container" id="natureCotainer" specificationName="' + v.specificationName + '">';
                                result += '<div class="pro-color">';
                                result += '<span class="part-note-msg"> ' + specificationName + ' </span>';
                                result += '<p id="color" class="color" >';
                                $.each(v.specificationValue, function (k0, v0) {
                                    var specificationValueId = v0.specificationValueId;
                                    var specificationValueName = v0.specificationValueName;
                                    if (skuValues && skuValues.indexOf(specificationValueId) >= 0) {
                                        result += '<a title="' + specificationValueName + '" class="a-item J_ping selected" specificationValueId="' + specificationValueId + '" report-eventparam="' + specificationValueName + '">' + specificationValueName + '</a>';
                                        var baseInfo = $("#specDetailInfo_spec").children(".base-sku");
                                        baseInfo.eq(k).text(specificationValueName);
                                    } else {
                                        result += '<a title="' + specificationValueName + '" class="a-item J_ping" specificationValueId="' + specificationValueId + '" report-eventparam="' + specificationValueName + '">' + specificationValueName + '</a>';
                                    }
                                });
                                result += '</p>';
                                result += '</div>';
                                result += '</div>';

                            });
                        }
                        $('.lists').append(result);
                        $("#specDetailInfo_spec").append("&nbsp;&nbsp;<span class=\"amount\">1</span>件");
                    } else
                        layer.msg("回调失败!");
                }
            });
        });

        $(".tclck").click(function () {
            $(".flick-menu-mask").hide();
            $(".spec-menu").removeClass("modal-active");
            $("body").removeClass("hidden")
        });

        $(".flick-menu-mask").click(function () {
            $(".flick-menu-mask").hide();
            $(".spec-menu").removeClass("modal-active");
            $("body").removeClass("hidden")
        });

        $('#quantity').bind('input propertychange', function () {
            $('.amount').html(this.value)
        }).bind('input input', function () {

        });

        //立即购买
        $(".directorder").click(function () {
            var $this = $(this);
            var specificationValueIds = "";
            $.each($(".nature-container"), function (k, v) {
                var select = $(this).children().children().find('.a-item.J_ping.selected');
                if (select.length > 0) {
                    specificationValueIds += select.attr("specificationValueId") + ",";
                }
            });
            var id = $this.metadata().id;//商品id
            window.location.href = '/b/order/singleInfo?shopId=${shopId!}&productId=' + id + '&type=ljgm&specificationValueIds=' + specificationValueIds;
        });


        $(document).on("click", '.color a', function () {
            $_this = $(this);
            $_this.addClass('selected').siblings().removeClass('selected');
            //更新sku价格
            var specificationtype = $(".spec-specificationtype").val();
            var specificationValueIds = "";
            var selections = $(".nature-container");
            if (selections.length > 0) {
                $.each($(".nature-container"), function (k, v) {
                    var select = $(this).children().children().find('.a-item.J_ping.selected');

                    if (select.length > 0) {
                        specificationValueIds += select.attr("specificationValueId") + ",";
                    }
                });
                console.log(specificationValueIds);
                var index = $_this.parent().parent().parent().index();
                var baseInfo = $("#specDetailInfo_spec").children(".base-sku");
                var arrIds = specificationValueIds.split(",");
                if ((arrIds.length - 1) == selections.length) {
                    $.ajax({
                        url: "/b/specification/getSkuPrice",
                        data: {"specificationtype": specificationtype, "specificationValueIds": specificationValueIds},
                        dataType: "json",
                        success: function (data) {
                            if (data.state == "ok") {

                                if (data.num < 1) {
                                    $_this.removeClass('selected');
                                    baseInfo.eq(index).text("");
                                    layer.msg("当前商品无货");
                                    return;
                                }
                                baseInfo.eq(index).text($_this.text());
                                $("#spec_price").text(data.price);
                                $(".spec-sku").find("span").eq(1).text(data.num);
                            } else if (data.status == "error") {
                                layer.open({
                                    content: data.message
                                    , btn: '确定'
                                });
                            }
                        }
                    });
                } else {
                    baseInfo.eq(index).text($_this.text());
                }

            }
        });

        //加减面板
        $(function () {
            //加号
            $(".jia").click(function () {
                var $parent = $(this).parent(".num");
                var $num = window.Number($(".inputBorder", $parent).val());
                $(".inputBorder", $parent).val($num + 1);
                $(".amount").html($num + 1)
            });

            //减号
            $(".jian").click(function () {
                var $parent = $(this).parent(".num");
                var $num = window.Number($(".inputBorder", $parent).val());
                if ($num > 2) {
                    $(".inputBorder", $parent).val($num - 1);
                    $('.amount').html($num - 1)
                } else {
                    $(".inputBorder", $parent).val(1);
                    $('.amount').html($num)
                }
            });
        })

        //客服
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();
            scrollTop > 50 ? $("#tools_widget_goTop").addClass("view-top") : $("#tools_widget_goTop").removeClass("view-top");
        });

        $('#tools_widget_goTop').click(function (e) {
            e.preventDefault();
            $('html,body').animate({scrollTop: 0});
        });
    })
</script>
</body>
</html>